<template>
	<view class="content">
	    <view class="user-details">
	        <view><text class="label">提货时间:</text><text class="value">{{pojo.thsj}}</text></view>
	        <view>
				<text class="label">延迟提货:</text>
				<view class="datetime-picker">
				    <view class="picker-date">
						<picker mode="date" :value="currentDate" :start="pojo.thsj" @change="handleDateChange">
							<view class="picker-text">{{ currentDate }}</view>
						</picker>
				    </view>
				    <view class="picker-time">
						<picker mode="time" :value="currentTime" @change="handleTimeChange">
							<view class="picker-text">{{ currentTime }}</view>
						</picker>
				    </view>
				</view>
			</view>
	        <view><text class="label" style="color: darkgray; font-size: 20rpx;">（延迟提货时间不可超过2个小时）</text></view>
	        <view><text class="label">延迟原因:</text></view>
	        <view>
				<view class="large-input">
				      <textarea 
				        placeholder="请输入内容..." 
				        :value="content" 
				        @input="onInput"
				        :maxlength="1000" 
				        :focus="isFocused" 
				        :autosize="true"
				        :show-confirm-bar="false"
				      />
				</view>
			</view>
			<view class="fixed-button-row">
				<button type="primary" style="width: 100%;" @click="tijiao">提交</button>
			</view>
	    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pojo:{
					thsj:'2024-08-02 07:00:00',
				},
				currentDate: '请选择日期',
				currentTime: '请选择时间',
				content: '', // 输入框的内容
				isFocused: false, // 是否聚焦
			}
		},
		methods: {
			handleDateChange(e) {
			    const dateValue = e.detail.value;
			    this.currentDate=dateValue
			},
			  handleTimeChange(e) {
			    const timeValue = e.detail.value;
			    this.currentTime=timeValue
			},
			onInput(e) {
				this.content = e.detail.value;
			},
			isValidDate(dateString) {// 检查日期字符串是否符合YYYY-MM-DD的格式
			  const regex = /^\d{4}-\d{2}-\d{2}$/;
			  console.log(dateString)
			  if (!regex.test(dateString)) {
				return false;
			  }
			  const date = new Date(dateString);
			  return !isNaN(date.getTime());
			},
		
			isValidTime(timeString) {// 检查时间字符串是否符合HH:mm的格式
				const regex = /^(\d{2}):(\d{2})$/;
				if (!regex.test(timeString)) {
					return false;
				}
				const [hour, minute] = timeString.split(':').map(Number);
				return hour >= 0 && hour <= 23 && minute >= 0 && minute <= 59;
			},
			isWithinTwoHours(dateTimeStr, baseDateTimeStr) {// 将日期时间字符串转换为Date对象
			  const dateTime = new Date(dateTimeStr);
			  const baseDateTime = new Date(baseDateTimeStr);
			  const diffInMinutes = (dateTime.getTime() - baseDateTime.getTime()) / (1000 * 60);
			  return diffInMinutes >= 0 && diffInMinutes <= 120;
			},
			tijiao(){
				if (!this.isValidDate(this.currentDate) || !this.isValidTime(this.currentTime)) {
					uni.showToast({
					    title: '请选择时间',
					    icon: 'none',
					    duration: 1000
					});
					return;
				}
				const combinedDateTime = `${this.currentDate} ${this.currentTime}`;
				if (this.isWithinTwoHours(combinedDateTime, this.pojo.thsj)) {
					uni.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 1000
					});
					console.log(this.content)
				} else {
					uni.showToast({
					    title: '不得超过2个小时或者低于当前时间',
					    icon: 'none',
					    duration: 1000
					});
				}
			}
		}
	}
</script>

<style>
.content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.user-details {
	width: 95%;
    padding: 20rpx 0;
    margin-left: 20rpx; /* 添加左侧外边距 */
    display: flex;
    flex-direction: column;
}
.label {
    width: 20%;
    float: left;
    text-align: right;
    padding-right: 1em; /* 添加一些内边距以增加松弛感 */
    white-space: nowrap; /* 防止文本换行 */
	margin-bottom: 1em;
}
.value {
    margin-left: 10%; /* 确保从左侧30%的位置开始显示内容 */
    clear: both; /* 清除浮动 */
	margin-bottom: 1em;
}
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.datetime-picker {
  display: flex;
}

.picker-date, .picker-time {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.picker-text {
  padding: 10rpx 20rpx;
  border: 1px solid #ccc;
  border-radius: 4rpx;
  background-color: #fff;
}
.large-input {
  margin: 20rpx;
  border: 1px solid #ccc;
  border-radius: 4rpx;
  overflow: hidden;
}

/* 输入框样式 */
.large-input textarea {
  width: 100%;
  min-height: 150rpx;
  max-height: 300rpx;
  padding: 10rpx;
  box-sizing: border-box;
  resize: none;
  outline: none;
  background-color: #fff;
  border: none;
  font-size: 25rpx;
  color: #333;
}
.fixed-button-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80rpx;
  background-color: #fff;
  z-index: 1000; /* 确保按钮层叠在其他内容之上 */
}

/* 按钮样式 */
.fixed-button-row button {
  width: 50%;
  height: 100%;
  line-height: 80rpx;
  text-align: center;
  border: none;
  color: #333;
  font-size: 30rpx;
}
</style>
